<template>
  <page-header-wrapper :title="false">
    <a-card title="优秀微信">
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="goodColumns"
        :data="goodData"
      >
        <template slot="image2" slot-scope="text, record">
          <a @click="handlePreview(record.image2)">
            <img :src="record.image2" width="30" height="30" />
          </a>
        </template>
        <template slot="image" slot-scope="text, record">
          <a @click="handlePreview(record.image)">
            <img :src="record.image" width="30" height="30" />
          </a>
        </template>
      </s-table>
    </a-card>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel0">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/wechat'
  import { getStatusList } from '@/api/wechat'
  const goodColumns = col.good
  export default {
    components: {
      STable
    },
    name: 'GoodWx',
    data () {
      return {
        goodColumns,
        goodData: parameters => {
          return getStatusList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        visible: false,
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      this.queryParam['filter[type]'] = '2'
    },
    methods: {
      async handlePreview (file) {
        const app = this
        app.previewImage = file
        app.previewVisible = true
      },
      handleCancel0 ({ fileList }) {
        this.fileList = fileList
      }
    }
  }
</script>

<style scoped>

</style>
